<template>
  <div class="main-container" style="height: 100%">
    <div class="item-content" style="height: 100%">
      <div class="form-content" style="margin-bottom: 20px; height: 100%">
        <div style="height: 100%">
          <myTable
            :loading="isLoading"
            tabHeight="600"
            ref="table"
            :data="data"
            :label="label"
            :addShow="true"
            :searchShow="true"
            :paginationConfig="paginationConfig"
            @deleteRow="deleteRow"
            @selectionChange="selectionChange"
            @changePage="changePage"
            @changeSize="changeSize"
            @edit="edit"
          >
            <template #c>
              <el-radio v-model="radio" label="1">符合</el-radio>
              <el-radio v-model="radio" label="2">不符合</el-radio>
            </template>
            <template #d>
              <el-input type="textarea" rows="3"></el-input>
            </template>
          </myTable>
        </div>
      </div>
    </div>
    <myDialog
      :Form="Form"
      :label="label2"
      :visible="visible"
      @disVisible="visible = false"
      @submitSecurity="submitSecurity"
    >
      <template #remark="obj">
        <el-input
          placeholder="请输入备注"
          type="textarea"
          :rows="2"
          v-model="obj.params.row.remark"
        >
        </el-input>
      </template>
    </myDialog>
  </div>
</template>

<script setup>
const radio = ref("1");
const label = ref([
  {
    label: "序号",
    prop: "a",
  },
  {
    label: "检查项目",
    prop: "b",
  },
  {
    label: "符合与否",
    prop: "c",
    columnType: "slot",
    slotName: "c",
  },

  {
    label: "问题描述",
    prop: "d",
    columnType: "slot",
    slotName: "d",
  },
]);
const label2 = ref([
  {
    label: "序号",
    prop: "a",
  },
  {
    label: "检查项目",
    prop: "b",
  },
  {
    label: "符合与否",
    prop: "c",
  },

  {
    label: "问题描述",
    prop: "d",
  },
]);
const data = ref([
  {
    a: "1",
    b: `施工安全管理有下列情形之一的，应判定为重第四条大事故隐患：
(一)建筑施工企业未取得安全生产许可证擅自从事建筑施工活动;
(二)施工单位的主要负责人、项目负责人、专职安全生产管理人员未取得
安全生产考核合格证书从事相关工作;
(三)建筑施工特种作业人员未取得特种作业人员操作资格证书上岗作业;
(四)危险性较大的分部分项工程未编制、未审核专项施工方案，或未按规
定组织专家对“超过一定规模的危险性较大的分部分项工程范围”的专项
施工方案进行论证`,
  },
  {
    a: "2",
    b: `基坑工程有下列情形之一的，应判定为重大事故隐患:
(一)对因基坑工程施工可能造成损害的毗邻重要建物、构筑物和地下管线
等,未采取专项防护措施;
(二)基坑土方超挖且未采取有效措施；
(三)深基坑施工未进行第三方监测；
- 30 -
(四)有下列基坑坍塌风险预兆之一，且未及时处理：
1.支护结构或周边建筑物变形值超过设计变形控制值；
2.基坑侧壁出现大量漏水、流土；
3.基坑底部出现管涌；
4.桩间土流失孔洞深度超过桩径。`,
  },
  {
    a: "3",
    b: `模板工程有下列情形之一的，应判定为重大事故隐患：
(一)模板工程的地基基础承载力和变形不满足设计要求;
(二)模板支架承受的施工荷载超过设计值;
（三)模板支架拆除及滑模、爬模爬升时，混凝土强度未达到设计或规范要
求。`,
  },
  {
    a: "4",
    b: `脚手架工程有下列情形之一的，应判定为重大事故隐患:
(一)脚手架工程的地基基础承载力和变形不满足设计要求;
(二)未设置连墙件或连墙件整层缺失;
(三)附着式升降脚手架未经验收合格即投入使用:
(四)附着式升降脚手架的防倾覆、防坠落或同步升降控制装置不符合设计
要求、失效、被人为拆除破坏;
(五)附着式升降脚手架使用过程中架体悬臂高度大于架体高度的 2/5 或大
于 6 米。`,
  },
  {
    a: "5",
    b: `起重机械及吊装工程有下列情形之一的，应判定为重大事故隐患:
(一)塔式起重机、施工升降机、物料提升机等起重机械设备未经验收合格
- 31 -
即投入使用，或未按规定办理使用登记;
(二)塔式起重机独立起升高度、附着间距和最高附着以上的最大悬高及垂
直度不符合规范要求;
(三)施工升降机附着间距和最高附着以上的最大悬高及垂直度不符合规范
要求;
(四)起重机械安装、拆卸、顶升加节以及附着前未对结构件、顶升机构和
附着装置以及高强度螺栓、销轴、定位板等连接件及安全装置进行检查;
(五)建筑起重机械的安全装置不齐全、失效或者被违规拆除、破坏;
(六)施工升降机防坠安全器超过定期检验有效期，标准节连接螺栓缺失或
失效:
(七)建筑起重机械的地基基础承载力和变形不满足设计要求。`,
  },
  {
    a: "6",
    b: `高处作业有下列情形之一的，应判定为重大事故隐患:
(一)钢结构、网架安装用支撑结构地基基础承载力和变形不满足设计要求，
钢结构、网架安装用支撑结构未按设计要求设置防倾覆装置；
(二)单榀钢桁架(屋架)安装时未采取防失稳措施;
(三)悬挑式操作平台的搁置点、拉结点、支撑点未设置在稳定的主体结构
上,且未做可靠连接。`,
  },

  {
    a: "7",
    b: `施工临时用电方面，特殊作业环境(隧道、人防工程，高温、有导电灰尘、
比较潮湿等作业环境)照明未按规定使用安全电压的，应判定为重大事故隐患`,
  },
  {
    a: "8",
    b: `有限空间作业有下列情形之一的，应判定为重大事故隐患:
(一)有限空间作业未履行“作业审批制度”，未对施工人员进行专项安全
教育培训,未执行“先通风、再检测、后作业”原则;
(二)有限空间作业时现场未有专人负责监护工作`,
  },
  {
    a: "9",
    b: `拆除工程方面，拆除施工作业顺序不符合规范和施工方案要求的，应判定
为重大事故隐患。`,
  },
  {
    a: "10",
    b: `暗挖工程有下列情形之一的，应判定为重大事故隐患:
(一)作业面带水施工未采取相关措施，或地下水控制措施失效且继续施工；
(二)施工时出现涌水、涌沙、局部坍塌，支护结构扭曲变形或出现裂缝，
且有不断增大趋势，未及时采取措施。`,
  },
  {
    a: "11",
    b: `使用危害程度较大、可能导致群死群伤或造成重大经济损失的施工工艺、
设备和材料，应判定为重大事故隐患。`,
  },
  {
    a: "12",
    b: `其他严重违反房屋市政工程安全生产法律法规、部门规章及强制性标准，
且存在危害程度较大、可能导致群死群伤或造成重大经济损失的现实危险，
应判定为重大事故隐患`,
  },
]);
const edit = (val) => {
  Form.value = {
    id: val.id,
    serialNumber: val.serialNumber,
    type: val.type,
    checklistContents: val.checklistContents,
    circumstance: val.circumstance,
    remark: val.remark,
    edit: true,
  };

  visible.value = true;
};
const visible = ref(false);
const submitSecurity = async (val) => {
  console.log(val);
  if (val.value.edit == true) {
    visible.value = false;
    let result = await putCorporateProductionResponsibility(val.value);
    if (result.code == 0) {
      Notification({
        title: "成功",
        message: "修改成功",
        type: "success",
      });
    } else {
      Notification({
        title: "失败",
        message: result.message,
        type: "error",
      });
    }
    changeTable();
  } else {
    visible.value = false;
    let result = await addCorporateProductionResponsibility(val.value);
    if (result.code == 0) {
      Notification({
        title: "成功",
        message: "新增成功",
        type: "success",
      });
    } else {
      Notification({
        title: "失败",
        message: result.msg,
        type: "error",
      });
    }
    changeTable();
  }
  Form.value = {
    id: null,
    serialNumber: null,
    type: null,
    checklistContents: null,
    circumstance: null,
    remark: null,
  };
};
const Form = ref({
  id: null,
  serialNumber: null,
  type: null,
  checklistContents: null,
  circumstance: null,
  remark: null,
});

const paginationConfig = ref({
  page: 1,
  size: 10,
  total: 0,
});
const changePage = (val) => {
  paginationConfig.value.page = val;
  changeTable();
};
const changeSize = (val) => {
  paginationConfig.value.size = val;
  changeTable();
};
import {
  getCorporateProductionResponsibility,
  deleteCorporateProductionResponsibility,
  addCorporateProductionResponsibility,
  putCorporateProductionResponsibility,
} from "@/api/safetymanagement";
import { ref, defineComponent, onMounted } from "vue";
import myTable from "@/components/my-table.vue";
import myDialog from "@/components/my-dialog.vue";
const NewComponentName = defineComponent({
  name: "NewComponentName",
});
console.log(NewComponentName);

import { Notification } from "element-ui";

const isLoading = ref(true);
const deleteRow = (id) => {
  selectList.value = [id];
  deleteList();
};
const changeTable = async (name) => {
  isLoading.value = true;
  let result = await getCorporateProductionResponsibility(
    paginationConfig.value.page,
    paginationConfig.value.size,
    name
  );
  console.log(result.message);
  console.log(result.data);
  paginationConfig.value.total = Number(result.message);
  isLoading.value = false;
  // data.value = result.data;
};
onMounted(() => {
  changeTable();
});
//上传文件
// const addFile = async (list) => {
//   let result = await addCorporateProductionResponsibility({
//     fileName: list[0].name,
//     fileUrl: list[0].url,
//   });
//   if (result.code == 0) {
//     Notification({
//       title: "成功",
//       message: "上传成功",
//       type: "success",
//     });
//     changeTable();
//   } else {
//     Notification({
//       title: "失败",
//       message: "上传失败",
//       type: "error",
//     });
//   }
// };
//批量选择的数据
const selectList = ref();
const selectionChange = (value) => {
  selectList.value = value;
};
//删除所选中的
const deleteList = async () => {
  if (selectList.value.length == 0) {
    Notification({
      title: "警告",
      message: "请选择要删除的项",
      type: "warning",
    });
    return;
  }
  let result = await deleteCorporateProductionResponsibility(selectList.value);
  if (result.code == 0) {
    Notification({
      title: "成功",
      message: "删除成功",
      type: "success",
    });
    paginationConfig.value.page = 1;
    changeTable();
  } else {
    Notification({
      title: "失败",
      message: "删除失败",
      type: "error",
    });
  }
};
//选中的id
selectionChange([]);
const table = ref(null);
</script>
<style lang="scss" scoped>
// :deep(.cell) {
//   display: flex;
//   justify-content: space-around;
// }
/*去除upload组件过渡效果*/
::v-deep .el-upload-list__item {
  transition: none !important;
}
::v-deep .el-upload-list__item-thumbnail {
  /* 图片在方框内显示长边 */
  object-fit: scale-down !important;
}
:deep(.el-input__inner) {
  height: auto !important;
}
:deep(.el-icon-arrow-right:before) {
  font-size: 12px !important;
}
:deep(.el-table th) {
  background: #fafafa;
}
:deep(.el-collapse-item__header) {
  font-weight: bold;
  color: #333;
  font-size: 15px;
  padding: 0 10px;
}
:deep(.el-icon-arrow-right:before) {
  font-weight: bold;
  color: #333;
  font-size: 25px;
}
body {
  min-height: 100vh;

  transition: all 0.3s ease;
}
.container {
  height: 100%;
  padding: 15px;
  overflow: auto;
  box-sizing: border-box;

  .main-content {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    min-width: 700px;

    .header-container {
      padding: 15px 15px;
      border-bottom: solid 1px #e6e6e6;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .title {
        position: relative;
        font-weight: bold;
        color: #333;
        font-size: 15px;
        padding-left: 16px;

        &::before {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }

        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }
      }
    }
  }
}

.main {
  padding: 12px 15px;

  .item-content {
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .item-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .subheading {
        position: relative;
        color: #555;
        font-size: 14px;
        padding-left: 14px;

        &::after {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 0;
          top: calc(50% - 7px);
          position: absolute;
        }

        &::before {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 4px;
          top: calc(50% - 7px);
          position: absolute;
        }
      }
    }

    .content-container {
      margin-top: -1px;
    }
  }
}

.w-100 {
  width: 100%;
}

.item-form-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  i {
    margin: 0 10px;
  }
}

.productList-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  height: 40px;
}

.form-content {
  padding: 0 10px;
}
.dialog-action-bar {
  text-align: center;
  margin-top: 30px;
}
</style>
